<template>
  <div class="h-full">
    <div class="mt-2 relative h-[30px]">
      <a-popover
        :open="openPopover"
        trigger="hover"
        placement="bottomLeft"
        :align="{ offset: [0, -1] }"
        :auto-adjust-overflow="false"
        overlay-class-name="w-[240px] z-10"
        @open-change="onOpenChange"
      >
        <template #content>
          <div class="p-2">
            <div>{{ empItem.ksmc }}{{ empItem.empName }}</div>
            <div>{{ empData?.schdDate }}</div>
            <a-divider class="w-full mt-3 mb-0" />
            <a-collapse v-model:active-key="activeKey" ghost>
              <template #expandIcon="{ isActive }"> <DownOutlined :rotate="isActive ? 360 : 270" class="color-collapse pt-2" /></template>
              <template v-if="empData.schdName">
                <a-collapse-panel :key="1">
                  <template #header>
                    <div class="py-1 pl-2 !bg-blue-50 text-sm color-collapse">{{ empData.schdName }}</div>
                  </template>
                  <template v-if="timeList.length > 0">
                    <div v-for="item in timeList" :key="item" class="flex justify-between items-center">
                      <span>{{ item.stTime }} ~ {{ item.edTime }}</span> <span>￥{{ item.zfy }}</span>
                    </div>
                  </template>
                  <template v-else> 暂无排班 </template>
                </a-collapse-panel>
              </template>
            </a-collapse>
          </div>
        </template>
        <EditCell title="上午班制 ">
          <SelectTable v-model:value="formState.schdName" type="暂无班制" :search-params="{ status: 0 }" @select="onSelectShifts($event)" />
        </EditCell>
      </a-popover>
    </div>
    <div class="relative h-[30px]">
      <EditCell title="上午诊室 ">
        <SelectTable v-model:value="formState.roomName" type="诊室" @select="onSelectRoom($event)" @close="onCloseRoom" />
      </EditCell>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { DownOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import EditCell from '@/components/EditCell'
import SelectTable from '@/components/SelectTable'
import { post } from '@/utils/request'

// import { getSystemConfig } from '@/utils/systemConfig'

const emit = defineEmits(['success'])
const props = defineProps({
  empData: {
    type: Object,
    default: () => ({})
  },
  empItem: {
    type: Object,
    default: () => ({})
  },
  weekTime: {
    type: Array,
    default: () => []
  },
  dateIndex: {
    type: Number,
    default: 0
  },
  sunObject: {
    type: String,
    default: ''
  }
})
const openPopover = ref(false)
const formState = ref({})
const activeKey = ref([1])
const timeList = ref({})
const onSelectShifts = (value) => {
  formState.value.schdCode = value.schdCode || ''
  formState.value.schdName = value.schdName || ''
  formState.value.schdCode ? handelrSave() : handlerDelete()
}
const onSelectRoom = (value) => {
  formState.value.roomId = value.roomId
  formState.value.roomName = value.roomName
  handelrSave()
}
const onCloseRoom = () => {
  if (!formState.value.roomName) {
    formState.value.roomId = ''
    handelrSave()
  }
}

// 删除排班
const handlerDelete = async () => {
  if (!props.empData?.id) return
  const { code, msg } = await post('/operation/scheduling/doDelOutpScheduling', { id: props.empData.id })
  if (code !== 0) return message.error(msg)
  message.success(msg)
  emit('success')
}

const handelrSave = async () => {
  const { code, msg } = await post('/operation/scheduling/saveEmpScheduling', {
    ...props.empItem.sun,
    ...formState.value,
    ...props.empItem,
    schdDate: dayjs(props.weekTime[0]).add(props.dateIndex, 'day').format('YYYY-MM-DD')
  })
  if (code !== 0) return message.error(msg)
  message.success(msg)
  emit('success')
}

// 获取班制时间列表
const getTimeList = async () => {
  const { data, code, msg } = await post('/operation/scheduling/getSchedulingTimeList', { schdCode: formState.value.schdCode })
  if (code !== 0) return message.error(msg)
  timeList.value = data
}

const onOpenChange = () => {
  if (props.empData?.id) {
    openPopover.value = !openPopover.value
  }
  formState.value.schdCode && getTimeList()
}

watch(
  () => props.empData,
  () => {
    formState.value = {}
    formState.value = {
      ...props.empData,
      roomName: props.empData?.roomName || props.empItem?.defaultRoomName,
      roomId: props.empData?.roomId || props.empItem?.defaultRoomId
    }
  },
  {
    immediate: true
  }
)
</script>
<style lang="less" scoped>
.select-frame {
  .relative {
    height: 30px;
  }
  .border-r-2:last-child {
    border-right: 0 !important;
  }
}
.color-collapse {
  color: var(--primary-color) !important;
}
</style>
